Seiten- und Headlinestruktur
Letztes Update:
21. September 2023
Entwurf – Inhalt noch in Arbeit
Symbolbild
Wie hilft dieses Element den Nutzern?
Gut und konsistent strukturierte Webseiten helfen den Nutzern und „Programmen“ einen schnellen Überblick über die Inhalte zu erhalten, sich sowohl im Gesamtkonstrukt einer Website als auch auf der aktuellen Einzel-Webseite zu orientieren und die gewünschten Inhalte schneller zu finden und wahrzunehmen. Sie helfen somit bei einer effizienten Navigation und Inhaltsaufnahme.
„Programme“? Sowohl Suchmaschinencrawler als auch Screenreader, mit denen z.B. blinde Nutzer Websites verwenden können sind grob gesagt „Programme“, die Webseiten rein anhand von Code und Text wahrnehmen. Jegliche optische Strukturierung fällt hier weg. Umso wichtiger ist eine gute Strukturierung für Suchmaschinenoptimierung und auch Nutzern welche Websites mit alternativen Technologien verwenden.
Wann kommt dieses Element zum Einsatz?
Jede einzelne Webseite muss eine optimierte Seiten- und Headlinestruktur aufweisen.
UX Konzeption
Gute Strukturierung der Inhalte und spezielle Auszeichnungen im HTML und WAI-ARIA helfen dabei den Nutzern die Orientierung und Inhaltsaufnahme zu erleichtern.
Seiten-Umfang:
Aus Nutzersicht sollte der Informationsgehalt einer Seite genau auf die Botschaft zugeschnitten sein – prägnant, treffend, aussagekräftig und kurz. Suchmaschinen dagegen haben lieber mehr Content. Grundsätzlich gilt: Angemessene Menge: So viel wie nötig, so wenig wie möglich. Weder ein künstliches Aufblähen noch ein Kürzen des Kürzens Willens ist sinnvoll.
URL, Pfad und Seitenname:
- ist für Nutzer verständlich (möglichst keine Zahlenkombinationen oder kryptische Zeichenkombis)
- Benennung lässt den Inhalt klar erkennen
- besteht nur aus Kleinbuchstaben, Bindestrich und wenn nötig Zahlen (keine Abstände, Sonderzeichen, Großbuchstaben, Leerzeichen,…. mit Ausnahme Parameter)
- keine Artikel und Füllwörter
- Als Trennzeichen “-” verwenden
- relevante Keywords müssen enthalten sein
- Bei Änderung der Pfade muss auf SEO geachtet werden und entsprechende Weiterleitungen eingerichtet werden
Seiten-Titel:
Jede einzelne Webseite benötigt einen Titel, welcher deren Thema und Zweck beschreibt. (WCAG 2.4.2)
Page Regions, Content Structure + Labeling:
Der Inhalt und auch bestimmte Bereiche auf Webseiten müssen mithilfe von HTML5- und WAI-ARIA-Rollen ausgezeichnet werden und benötigen darüber hinaus eine Beschriftung damit User sie erkennen können.
Allgemeine Prinzipien der Landmark-Gestaltung:
- https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/
- https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/
- https://www.w3.org/WAI/tutorials/page-structure/
- https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/general-principles.html
Headings:
Seiten immer mit der Hauptbotschaft beginnen – auf Einleitungen oder Herleitungen verzichten!
- Beschreiben Thema oder Zweck des folgenden Abschnitts bzw. vermitteln dessen Kernbotschaft
- gliedern Text bzw. Inhalt in logische Abschnitte – schaffen Orientierung
- sind hierarchisch strukturiert: Überschriften müssen hierarchisch und logisch verschachtelt und entsprechend ausgezeichnet sein, damit Nutzer die Abschnitte entsprechend ihrer Wichtigkeit und Beziehungen untereinander erkennen können.
- fassen den Inhalt des folgenden Bereichs zusammen bzw. beschreiben was m nächsten Absatz / maximal 2 Absätzen steht
- müssen den Leser überzeugen dass es sich lohnt die weiteren Inhalte der Seite anzusehen
- wecken Neugierde, animieren zum Weiterlesen, kann auch Call to Action enthalten
- müssen in sich schlüssig sein wenn man sie nacheinander ohne den Lauftext liest und ganz klar verständlich machen worum es auf der Seite geht und welche Infos wo zu finden sind
- lockern die Seite auf und verhindern lange Lauftexte
Abschnittsüberschriften gliedern den Inhalt (WCAG Richtlinie 2.4.10)
Überschriften und Labels beschreiben Thema oder Zweck (WCAG Richtlinie 2.4.6)
Einleitungstext
Seiten immer mit der Hauptbotschaft beginnen – auf Einleitungen oder Herleitungen verzichten!
- fasst die Botschaft der Seite bereits zu Beginn prägnant zusammen
- schafft Orientierung
- Weckt Interesse
- beantwortet die wichtigsten Fragen (wer? Was?,…)
- kann auch einen Call to Action enthalten
- Länge um die 250 Zeichen
Strukturierte Daten / Schema.org
Auf den Plattformen und in E-Mail Nachrichten wie beispielsweise Newslettern kommen Schemata für strukturierte Daten zum Einsatz. Diese ermöglichen unter anderem Anwendungen von Google, Microsoft, Pinterest etc. mittels dieser Informationen reichhaltigere und für die Nutzer passende Inhalte anzuzeigen.
Einführung in das Markup für strukturierte Daten in der Google Suche
Details zu den für Plattformen und E-Mail Nachrichten zu verwendende Schemata:
- Meta Tags und Strukturierte Daten
- https://schema.org/
- Einführung in das Markup für strukturierte Daten in der Google Suche auf developers.google.com
Weiterführendes zu Zugänglichkeit und Barrierefreiheit
Richtlinie für barrierefreie Webinhalte (WCAG)
Die Richtlinien für barrierefreie Webinhalte (WCAG) beinhaltet Prinzipien, Richtlinien und Erfolgskriterien um Webinhalte barrierefreier zu gestalten. Die Grundlagen zur Zugänglichkeit sind in der Guideline eingearbeitet. Details finden sich unter Richtlinien für barrierefreie Webinhalte WCAG.
Accessible Rich Internet Application (ARIA)
ARIA-Spezifikationen sind eine definierte Semantik für Barrierefreiheit und wird verwendet, um barrierefreie Webumgebungen zu erstellen. Anleitungen, Muster und funktionale Beispiele finden sich unter https://www.w3.org/WAI/ARIA/apg/.
Detailliertere Informationen für vorliegendes Element:
UX-Writing
Was ist zu texten
jeweilige Headline, Subheadline bzw. Zwischenüberschrift
Wie ist zu texten
Es gelten die allgemeinen Regeln zu Text formulieren – interessant, verständlich und vertrauenswürdig schreiben und folgende spezifische Vorgaben:
- Müssen das jeweilige Thema bzw. den Zweck des folgenden Inhaltes zusammenfassend beschreiben.
- verzichten auf: Humor, witzige Formulierungen, Wortspiele, …
- Keywords müssen enthalten sein
WCAG Prinzip Bedienbar: Richtlinie 2.4.6.: Überschriften und Labels beschreiben Thema oder Zweck
H1
- ist der wichtigste Wegweiser für die Nutzer aber auch für Suchmaschinen
- Bringt die Botschaft der gesamten Seite klar auf den Punkt
- animiert zum Weiterlesen, kann auch einen Call to Action enthalten
- muss auf jeder Seite vorhanden sein
- darf nur einmalig auf der Seite enthalten sein
- Der Text der H1 muss für jede Seite einmalig sein
- Kurz und Prägnant Maximalzeichenlänge rund 70 Zeichen
- Füllwörter und Artikel können gestrichen werden
- Keywords müssen enthalten sein
Weitere Überschriften H2,….
- fassen den Inhalt des folgenden Bereichs zusammen
- schaffen Orientierung
- wecken Neugierde, animieren zum Weiterlesen, kann auch Call to Action enthalten
- kurz und prägnant
- Keywords müssen enthalten sein